<template>


  <div id="userList">

    <el-row>
      <!-- 左边部门树 -->
      <el-col :span="6">
        <div class="grid-content gridLeft">
          <h4>部门管理</h4>
          <el-row>
            <div class="userHandle">
              <el-button type="primary" icon="el-icon-circle-plus-outline" round @click.native="openAddDept"
                         size="mini">
                新增
              </el-button>
              <el-button type="success" icon="el-icon-edit" round @click.native="openUpdateDept" size="mini">修改
              </el-button>
              <el-button type="danger" icon="el-icon-delete" round @click.native="deleteDept" size="mini">删除</el-button>
            </div>
          </el-row>
          <el-tree :data="deptTreeData" :props="deptProps" @node-click="deptTreeClick"
                   default-expand-all highlight-current></el-tree>
        </div>
      </el-col>
      <!-- 右边用户列表 -->
      <el-col :span="18">
        <div class="grid-content gridRight">
          <h4>用户管理</h4>
          <!-- 列表工具栏 -->
          <el-row class="userHandle">
            <div class="cf handleLeft">
              <el-button type="primary" icon="el-icon-circle-plus-outline" round @click.native="openAddStaff"
                         size="mini">
                新增
              </el-button>
              <el-button type="success" icon="el-icon-edit" round @click.native="openUpdateStaff" size="mini">修改
              </el-button>
              <el-button type="danger" icon="el-icon-delete" round @click.native="deleteStaff" size="mini">删除
              </el-button>
              <el-button type="primary" icon="el-icon-edit-outline" round @click.native="openRoleDialog" size="mini">
                分配角色
              </el-button>
              <el-button type="warning" icon="el-icon-info" round @click.native="resetUserPassword" size="mini">重设密码
              </el-button>
            </div>
            <div class="cf handleRight">
              <el-input v-model="searchUserName" placeholder="请输入用户名称" clearable>
              </el-input>
              <el-button type="primary" icon="el-icon-search" round @click.native="searchUserList" size="mini">搜索
              </el-button>
              <el-button type="info" icon="el-icon-refresh" round @click.native="resetUserList" size="mini">重置
              </el-button>
            </div>
          </el-row>

          <!-- 用户列表数据 -->
          <el-table
            :data="userDataList"
            style="width: 100%" highlight-current-row @row-click="userListClick">
            <el-table-column
              prop="systemStaffAccount"
              label="用户账号"
              align="center">
            </el-table-column>
            <el-table-column
              prop="systemStaffName"
              label="用户名称"
              align="center">
            </el-table-column>
            <el-table-column
              prop="systemDepartment"
              label="所属部门"
              :formatter="formatSystemDepartmentName"
              align="center">
            </el-table-column>
            <el-table-column
              prop="isLockedStr"
              label="是否可用"
              align="center"
              :formatter="formatIsLocked">
            </el-table-column>
          </el-table>
          <el-pagination
            layout="prev, pager, next"
            :page-sizes="[5]"
            :page-size="userListPageSize"
            :total="userListPageTotal"
            @current-change="currentChangeUserListPage">
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <!-- 部门弹窗 -->
    <el-dialog title="部门信息" :visible.sync="deptInfoDialog">
      <el-form :model="deptForm" ref="deptForm" label-position="left">
        <el-form-item label="部门名称" :label-width="formLabelWidth" prop="systemDeptName"
                      :rules="{required: true, message: '部门名称不能为空', trigger: 'blur'}">
          <el-input v-model="deptForm.systemDeptName" autocomplete="off" placeholder="部门名称"></el-input>
        </el-form-item>
        <el-form-item label="上级部门" :label-width="formLabelWidth" prop="systemDeptParentId"
                      :rules="{required: true, message: '请选择上级部门', trigger: 'blur'}">
          <el-select v-model="deptForm.systemDeptParentId" placeholder="请选择上级部门" :disabled="deptForm.systemDeptNameFlag">
            <el-option
              v-for="item in parentDeptList"
              :key="item.systemDeptId"
              :label="item.systemDeptName"
              :value="item.systemDeptId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门排序" :label-width="formLabelWidth">
          <el-input v-model="deptForm.systemDeptSort" autocomplete="off" placeholder="部门排序"></el-input>
        </el-form-item>
        <el-form-item label="部门备注" :label-width="formLabelWidth">
          <el-input v-model="deptForm.systemDeptRemark" autocomplete="off" placeholder="部门备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="deptInfoDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveOrUpdateDept('deptForm')">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 新增-用户弹窗 -->
    <el-dialog title="用户信息" :visible.sync="addUserInfoDialog">
      <el-form :model="addUserForm" ref="addUserForm" label-position="left">
        <el-form-item label="用户名称" :label-width="formLabelWidth" prop="systemStaffName"
                      :rules="{required: true, message: '用户名称不能为空', trigger: 'blur'}">
          <el-input v-model="addUserForm.systemStaffName" autocomplete="off" placeholder="用户名称"></el-input>
        </el-form-item>
        <el-form-item label="用户账号" :label-width="formLabelWidth" prop="systemStaffAccount"
                      :rules="{required: true, message: '用户账号不能为空', trigger: 'blur'}">
          <el-input v-model="addUserForm.systemStaffAccount" autocomplete="off" placeholder="用户账号"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth" prop="systemStaffPassword"
                      :rules="{required: true, message: '用户密码不能为空', trigger: 'blur'}">
          <el-input type="password" v-model="addUserForm.systemStaffPassword" autocomplete="off"
                    placeholder="用户密码"></el-input>
        </el-form-item>
        <el-form-item label="所属部门" :label-width="formLabelWidth">
          <el-input v-model="addUserForm.systemDeptName" autocomplete="off" placeholder="所属部门"
                    :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="是否可用" :label-width="formLabelWidth" prop="isLocked"
                      :rules="{required: true, message: '账号状态不能为空', trigger: 'blur'}">
          <el-radio-group v-model="addUserForm.isLocked">
            <el-radio :label="1">可用</el-radio>
            <el-radio :label="2">锁定</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户备注" :label-width="formLabelWidth">
          <el-input v-model="addUserForm.systemStaffRemark" autocomplete="off" placeholder="用户备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addUserInfoDialog = false">取 消</el-button>
        <el-button type="primary" @click="addStaff('addUserForm')">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改-用户弹窗 -->
    <el-dialog title="用户信息" :visible.sync="updateUserInfoDialog">
      <el-form :model="updateUserForm" ref="updateUserForm" label-position="left">
        <el-form-item label="用户名称" :label-width="formLabelWidth" prop="systemStaffName"
                      :rules="{required: true, message: '用户名称', trigger: 'blur'}">
          <el-input v-model="updateUserForm.systemStaffName" autocomplete="off" placeholder="用户名称"></el-input>
        </el-form-item>
        <el-form-item label="用户账号" :label-width="formLabelWidth">
          <el-input v-model="updateUserForm.systemStaffAccount" autocomplete="off" placeholder="用户账号"
                    :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="所属部门" :label-width="formLabelWidth">
          <el-input v-model="updateUserForm.systemDeptName" autocomplete="off" placeholder="所属部门"
                    :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="是否可用" :label-width="formLabelWidth" prop="isLocked">
          <el-radio-group v-model="updateUserForm.isLocked">
            <el-radio :label="1">可用</el-radio>
            <el-radio :label="2">锁定</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户备注" :label-width="formLabelWidth">
          <el-input v-model="updateUserForm.systemStaffRemark" autocomplete="off" placeholder="用户备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateUserInfoDialog = false">取 消</el-button>
        <el-button type="primary" @click="updateStaff('updateUserForm')">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分配角色弹窗 -->
    <el-dialog title="角色信息" :visible.sync="roleDialog">
      <el-select v-model="roleId" placeholder="请选择角色">
        <el-option
          v-for="item in roleList"
          :key="item.systemRoleId"
          :label="item.systemRoleName"
          :value="item.systemRoleId">
        </el-option>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button @click="roleDialog = false">取 消</el-button>
        <el-button type="primary" @click="saveStaffRelRole">确 定</el-button>
      </div>
    </el-dialog>

  </div>



</template>


<script>

  import common from "@/assets/js/common/common.js";

  export default {
    data () {
      return {
        userDataList: [],//用户数据列表
        userListPageTotal: 50,//用户列表总数
        userListPageSize: 10, //用户每页显示的数据量
        userListPageNo: 1,//用户分页的当前页
        deptTreeData: [],//树形部门数据
        //树形部门定义的格式对应关系
        deptProps: {
          children: 'children',
          label: 'text'
        },
        deptInfoDialog: false, //部门窗口状态属性
        parentDeptList: [],//父级部门List
        //部门信息表单
        deptForm: {
          systemDeptId: null,
          systemDeptName: null,
          systemDeptParentId: null,
          systemDeptSort: null,
          systemDeptRemark: null
        },
        formLabelWidth: '120px', //全部form宽度
        //用户列表搜索变量
        searchUserName: "",
        addUserInfoDialog: false, //新增用户信息窗口状态属性
        updateUserInfoDialog: false, //更新用户信息窗口状态属性
        //新增用户信息表单
        addUserForm: {
          systemStaffId: null,
          systemDeptId: null,
          systemDeptName: null,
          systemStaffAccount: null,
          systemStaffPassword: null,
          systemStaffName: null,
          isLocked: null,
          systemStaffRemark: null
        },
        //更新用户信息表单
        updateUserForm: {
          systemStaffId: null,
          systemDeptId: null,
          systemDeptName: null,
          systemStaffAccount: null,
          systemStaffName: null,
          isLocked: null,
          systemStaffRemark: null
        },
        roleDialog: false, // 角色信息弹窗
        roleId: null, //角色id
        roleList: [] //角色列表
      }
    },
    //初始化加载
    mounted: function () {
      //需要执行的方法可以在mounted中进行触发，其获取的数据可以赋到data中后，可以放在前面进行渲染
      //获取部门树形数据
      this.getDeptTreeList();
      //获取用户分页列表
      this.getUserList({
        pageNo: 1,
        pageSize: this.userListPageSize,
        systemDeptId: this.deptForm.systemDeptId
      });
      this.getParentDeptList();//获取所有一级部门列表
      this.getRoleList();//获取所有角色列表
    },
    //具体js方法
    methods: {
      /**
       * 获取用户分页列表数据
       * */
      getUserList(){
        //模拟用户列表数据
        this.userDataList = [{
          systemStaffId: 1,
          systemDeptId: 1,
          systemDeptName: "测试部门1",
          systemStaffAccount: "test1",
          systemStaffName: "用户1",
          isLocked: 1,
          systemStaffRemark: ""
        }, {
          systemStaffId: 2,
          systemDeptId: 1,
          systemDeptName: "测试部门1",
          systemStaffAccount: "test2",
          systemStaffName: "用户2",
          isLocked: 1,
          systemStaffRemark: ""
        }, {
          systemStaffId: 3,
          systemDeptId: 1,
          systemDeptName: "测试部门1",
          systemStaffAccount: "test31",
          systemStaffName: "用户3",
          isLocked: 2,
          systemStaffRemark: ""
        }, {
          systemStaffId: 4,
          systemDeptId: 1,
          systemDeptName: "测试部门1",
          systemStaffAccount: "test4",
          systemStaffName: "用户4",
          isLocked: 1,
          systemStaffRemark: ""
        }];
        this.userListPageTotal = 50;//总数
        this.userListPageNo = 1;//当前页
        //重置表单数据
        this.addUserForm = {};
        this.updateUserForm = {};
      },
      /**
       * 分页组件-改变当前页事件监听
       * */
      currentChangeUserListPage(val){
        console.log(val);
        this.getUserList({
          pageNo: val,
          pageSize: this.userListPageSize,
          systemDeptId: this.deptForm.systemDeptId
        });
      },
      /**
       * 根据用户列表的数据转换
       * */
      formatIsLocked(row){
        return this.getLockedEnumMsg(row.isLocked);
      },
      /**
       * 根据部门数据转换成部门名称
       * */
      formatSystemDepartmentName(row){
        return row.systemDeptName;
      },
      /**
       * 根据枚举值获取锁定状态的枚举信息
       * */
      getLockedEnumMsg(value){
        var msg = "";
        switch (value) {
          case 1:
            msg = "可用";
            break;
          case 2:
            msg = "锁定";
            break;
          default:
            break;
        }
        return msg;
      },
      /**
       * 搜索用户列表
       * */
      searchUserList(){
        var param = {
          pageNo: 1,
          pageSize: 10,
          systemDeptId: this.deptForm.systemDeptId,
          systemStaffName: this.searchUserName
        };
        this.getUserList(param);
      },
      /**
       * 重置用户列表
       * */
      resetUserList(){
        this.searchUserName = "";
        var param = {
          pageNo: 1,
          pageSize: 10,
          systemDeptId: this.deptForm.systemDeptId
        };
        this.getUserList(param);
      },
      /**
       * 获取部门树列表
       * */
      getDeptTreeList(){
        this.deptTreeData = [{
          id: 1,
          text: "一级部门",
          children: [{
            id: 2,
            text: "二级部门-1"
          }, {
            id: 3,
            text: "二级部门-2"
          }]
        }];
      },
      /**
       * 部门树点击事件
       * */
      deptTreeClick(data){
        this.getUserList({
          pageNo: 1,
          pageSize: this.userListPageSize,
          systemDeptId: data.id
        });
        //部门表单里面的deptId赋值
        this.deptForm.systemDeptId = data.id;
        this.deptForm.systemDeptName = data.text;
      },
      /**
       * 打开新增部门
       * */
      openAddDept(){
        //清空表单数据
        this.deptForm = {};
        this.getParentDeptList();//更新一级部门数据。
        this.deptInfoDialog = true;

      },
      /**
       * 获取一级部门数据列表并更新
       * */
      getParentDeptList(){
        this.parentDeptList = [{
          systemDeptId: 0,
          systemDeptName: "无"
        }, {
          systemDeptId: 1,
          systemDeptName: "一级部门"
        }];
      },
      /**
       * 保存部门信息
       * */
      saveOrUpdateDept(formName){
        this.$refs[formName].validate((valid) => {
          if (!valid) {
            //console.log('error submit!!');
            return false;
          }
          if (this.deptForm.systemDeptId == null) {
            this.addDept();
          } else {
            this.updateDept();
          }
        });
      },
      /**
       * 新增部门
       * */
      addDept(){
        this.getDeptTreeList();//重新加载树形数据
        common.message("操作成功", "success"); //提示框信息
        this.deptInfoDialog = false; //关闭弹窗
      },
      /**
       * 根据部门id打开弹窗
       * */
      openUpdateDept(){
        if (this.deptForm.systemDeptId == null) {
          common.message("请选择需要修改的部门", "warning");
          return;
        }
        this.getParentDeptList();//更新一级部门数据
        this.deptInfoDialog = true;
      },
      /**
       * 更新部门
       * */
      updateDept(){
        this.getDeptTreeList();//重新加载树形数据
        common.message("操作成功", "success"); //提示框信息
        this.deptInfoDialog = false; //关闭弹窗
      },
      /**
       * 删除部门
       * */
      deleteDept(){
        if (this.deptForm.systemDeptId == null) {
          common.message("请选择需要删除的部门", "warning");
          return;
        }
        this.$confirm("确认是否删除部门【" + this.deptForm.systemDeptName + "】", "是否继续?", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.getDeptTreeList();//重新加载树形数据
          common.message("操作成功", "success"); //提示框信息
        });
      },
      /**
       * 用户列表点击事件
       * */
      userListClick(row){
        this.addUserForm.systemDeptId = row.systemDeptId;

        this.updateUserForm.systemStaffId = row.systemStaffId;
        this.updateUserForm.systemStaffName = row.systemStaffName;
        this.updateUserForm.systemDeptId = row.systemDeptId;
      },
      /**
       * 打开新增用户窗口
       * */
      openAddStaff(){
        if (this.deptForm.systemDeptId == null) {
          common.message("请选择需要新增用户的部门", "warning");
          return;
        }
        //清空表单数据
        this.addUserForm = {};
        //根据选择的部门信息，显示对应的部门信息
        this.addUserForm.systemDeptId = this.deptForm.systemDeptId;
        this.addUserForm.systemDeptName = this.deptForm.systemDeptName;
        this.addUserInfoDialog = true;
      },
      /**
       * 新增用户
       * */
      addStaff(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            common.message("操作成功", "success"); //提示框信息
            this.resetUserList();//重置当前用户列表
            this.addUserInfoDialog = false; //关闭弹窗
          } else {
//            console.log('error submit!!');
            return false;
          }
        });
      },
      /**
       * 打开更新用户信息窗口
       * */
      openUpdateStaff(){
        if (this.updateUserForm.systemStaffId == null) {
          common.message("请选择你需要修改的用户信息", "warning");
          return;
        }
        this.updateUserInfoDialog = true; //打开弹窗
      },
      /**
       * 更新用户
       * */
      updateStaff(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            common.message("操作成功", "success"); //提示框信息
            this.resetUserList();//重置当前用户列表
            this.updateUserInfoDialog = false; //关闭弹窗
          } else {
//            console.log('error submit!!');
            return false;
          }
        });
      },
      /**
       * 删除用户
       * */
      deleteStaff(){
        if (this.updateUserForm.systemStaffId == null) {
          common.message("请选择你需要删除的用户信息", "warning");
          return;
        }
        this.$confirm("确认是否删除用户【" + this.updateUserForm.systemStaffName + "】", "是否继续?", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          common.message("操作成功", "success"); //提示框信息
          this.resetUserList();//重置当前用户列表
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      },
      /**
       * 获取所有角色列表
       * */
      getRoleList(){
        this.roleList = [{
          systemRoleId: 1,
          systemRoleName: "系统管理员"
        }, {
          systemRoleId: 2,
          systemRoleName: "测试管理员"
        }];
      },
      /**
       * 打开分配角色弹窗
       * */
      openRoleDialog(){
        if (this.updateUserForm.systemStaffId == null) {
          common.message("请选择你需要分配角色的用户", "warning");
          return;
        }
        this.roleId = 1;
        this.roleDialog = true;

      },
      /**
       * 保存角色分配
       * */
      saveStaffRelRole(){
        common.message("操作成功", "success"); //提示框信息
        this.roleDialog = false;
      },
      /**
       * 重设密码
       * */
      resetUserPassword(){
        if (this.updateUserForm.systemStaffId == null) {
          common.message("请选择你需要重置密码的用户", "warning");
          return;
        }
        this.$confirm("确认是否重置用户名称【" + this.updateUserForm.systemStaffName + "】的密码", "是否继续?", '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          common.message("操作成功: 重置密码【123456】", "success"); //提示框信息
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      }
    }
  }
</script>


<style lang="scss">
  #userList{
    .cf:after,.cf::after{
      content: '';
      display: block;
      clear: both;
    }
    .el-col {
      border-radius: 4px;
    }
    .grid-content {
      margin:30px;
      border-radius: 4px;
      background: white;
      padding-bottom: 20px;
      h4{
        border-bottom: 2px solid #F1F1F1;
        margin: 0 20px;
        padding: 10px 0;
      }
      .userHandle{
        padding:15px 20px;
        line-height: 40px;
        .handleLeft{
          float: left;
        }
        .handleRight{
          float: right;
        }
      }
      .el-button.is-round{
        border-radius: 6px;
      }
      .el-input{
        width:auto
      }
    }
    .gridLeft{
      margin-right:2px;
      .el-tree{
        display: inline-block;
        width: 70%;
      }
    }
    .gridRight{
      margin-left:2px;
      .el-pagination{
        margin-top:20px;
      }
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
  }

</style>
